<template>
  <div class="LandmarkDetail">
    <!-- 导航栏 -->
    <userTopMenu></userTopMenu>

    <!-- 景点详情 -->
    <p style="font-size: 80px; color: burlywood">
      {{ lmInfo.landmarks.lmName }}
    </p>
    <div style="display: flex; justify-content: space-around">
      <div style="height: 500px; width: 30%; margin: 20px; overflow: hidden">
        <img
          :src="lmInfo.pictures.picLink"
          alt="景区图片"
          style="width: 100%; height: 100%"
        />
      </div>
      <div style="width: 70%; margin-top: 30px">
        <el-descriptions column="1" style="font-size: 30px; align-self: center">
          <el-descriptions-item label="地址">{{
            lmInfo.landmarks.lmAddr
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{
            lmInfo.landmarks.lmTelephone
          }}</el-descriptions-item>
          <el-descriptions-item label="景区评级">
            <el-tag size="small" style="font-size: 30px; align-self: center">{{
              lmInfo.landmarks.lmLabel
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="开放时间">
            <el-tag size="small" style="font-size: 30px; align-self: center">{{
              lmInfo.landmarks.shopHours
            }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <div class="bottom clearfix">
          <el-rate
            v-model="lmInfo.landmarks.overallRating"
            disabled
            show-score
            text-color="#ff9900"
          >
          </el-rate>
          <div style="display: flex; float: right; margin-bottom: 10px">
            <p
              style="
                color: red;
                align-self: center;
                font-weight: bold;
                font-size: 30px;
                margin-right: 20px;
              "
            >
              {{ lmInfo.landmarks.lmPrice }}
            </p>
            <!-- &nbsp;&nbsp;&nbsp; -->
            <orderbutton :ordersBasic="ordersBasic"></orderbutton>
            <!-- &nbsp;&nbsp;&nbsp;
            <navigationbutton :maps="maps"></navigationbutton> -->
          </div>
        </div>
      </div>
    </div>
    <hr />

    <!-- 其他信息 -->
    <p style="font-size: 80px">景区简介</p>
    <p style="font-size: 30px">{{ lmInfo.landmarks.lmDescription }}</p>
    <hr />
    <p style="font-size: 80px">购票须知</p>
    <p style="font-size: 30px">{{ lmInfo.landmarks.ticketsDescription }}</p>
    <hr />
    <p style="font-size: 80px">附近酒店</p>
    <hotelsnearby :cardlist="this.cardlist"></hotelsnearby>
    <hr />

    <!-- 评价 -->
    <p v-if="flag" style="font-size: 80px">景区评论</p>
    <p v-else style="font-size: 50px; text-align: center">暂无评论</p>
    <commentlists :comment="comment" @has-data="hasData()"></commentlists>

    <hr />
  </div>
</template>

<script>
import userTopMenu from "@/components/menu/userTopMenu.vue";
import hotelsnearby from "@/components/cards/hotelCards.vue";
import commentlists from "@/components/lists/commentLists.vue";
import orderbutton from "@/components/buttons/orderButton.vue";
import navigationbutton from "@/components/buttons/navigationButton.vue";
export default {
  name: "landmarkdetail",
  components: {
    userTopMenu,
    hotelsnearby,
    commentlists,
    orderbutton,
    navigationbutton,
  },
  data() {
    return {
      pageDto: {
        landmarks: { lmId: 5 },
      },
      lmInfo: {landmarks:{}},

      // 子组件传参
      // hotelsnearby
      cardlist: { page: 1, size: 6, city: "" },
      // commentlists
      comment: {},
      // orderbutton
      ordersBasic: {},
      // navigationbutton
      maps: {},

      // 其他参数
      flag: true,
    };
  },
  methods: {
    // 路由/组件传值
    setParams() {
      this.pageDto.landmarks.lmId = this.$route.params.id;

      //子组件参数设置

      //评论组件
      this.comment.relatedEntityType = 1;
      this.comment.relatedEntityId = this.pageDto.landmarks.lmId;
      //评论组件button展示控制
      this.comment.flag = false;
    },
    // 下单按钮基础参数设置 -- 必须lmInfo有值之后才执行该方法
    setOrderBasic() {
        this.ordersBasic.orderStatus = 0;
        this.ordersBasic.transactionType = 1;
        this.ordersBasic.transactionId = this.lmInfo.landmarks.lmId;
        this.ordersBasic.orderTotalAmount = parseInt(this.lmInfo.landmarks.lmPrice.match(/\d+(\.\d+)?/)[0]);
        this.ordersBasic.Name = this.lmInfo.landmarks.lmName;
    },
    // 下单按钮基础参数设置 -- 必须lmInfo有值之后才执行该方法
    setMapBasic(){
      console.log(1);
    },
    // 查询酒店信息
    queryByPage() {
      this.$api.landmarksApi.queryByPage(this.pageDto).then((res) => {
        this.lmInfo = res.data.data[0];
        this.cardlist.city = this.lmInfo.city;
      });
    },

    // 评论
    // 子组件回调
    hasData() {
      this.flag = false;
    },
  },
  watch:{
    lmInfo:{
      immediate:true,
      deep:true,
      handler(newV,oldV){
        this.setOrderBasic();
      }
    }
  },
  mounted() {
    this.setParams();
    this.queryByPage();
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url("../../assets//css/home/css/font-awesome.min.css");
@import url("../../assets//css/home/css/linearicons.css");
@import url("../../assets//css/home/css/animate.css");
@import url("../../assets//css/home/css/flaticon.css");
@import url("../../assets//css/home/css/slick.css");
@import url("../../assets//css/home/css/slick-theme.css");
@import url("../../assets//css/home/css/bootstrap.min.css");
@import url("../../assets//css/home/css/bootsnav.css");
@import url("../../assets//css/home/css/style.css");
@import url("../../assets//css/home/css/responsive.css");

/* home */
* {
  padding: 0;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.LandmarkDetail {
  font-family: "maobi";
  font-size: 20px;
  color: #a09e9c;
  text-transform: initial;
  max-width: 1920px;
  margin: 0 auto;
  overflow-x: hidden;
}
</style>
